<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="题型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio label="1">单选</el-radio>
          <el-radio label="2">多选</el-radio>
          <el-radio label="3">简答</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="typeToLabel" :prop="{1:'single_select_answer',2:'multiple_select_answer',3:'short_answer'}[form.type]">
        <TypeContent :form="form" />
      </el-form-item>
    </el-form>
    <el-button @click="submit">确定</el-button>
  </div>
</template>
<script>
import TypeContent from './components/typeContent'
export default {
  components: {
    TypeContent
  },
  data() {
    return {
      form: {
        'title': '在画布资源操作中，分配颜色，填充画布的函数依次为',
        'type': '1',
        'subject': 11,
        'step': '1',
        'enterprise': 15,
        'difficulty': '2',
        'single_select_answer': 'A',
        multiple_select_answer: [],
        short_answer: '',
        'video': 'upload/20191129/bd666ff11c11cc01f494d6ba49757a64.png',
        'remark': '好好吃东西哦',
        'city': [
          '天津市',
          '市辖区'
        ],

        'answer_analyze': '',
        'select_options': [
          {
            'label': 'A',
            'text': '狗不理',
            'image': 'upload/20191129/fd5f03a07d95e3948860240564b180e4.jpeg'
          },
          {
            'label': 'B',
            'text': '猫不理',
            'image': 'upload/20191129/e93e7bb72accda7f3159cdabc4203991.jpeg'
          },
          {
            'label': 'C',
            'text': '麻花',
            'image': 'upload/20191129/b7caf98be9d0aa6764b0112ba0dfa19e.jpeg'
          },
          {
            'label': 'D',
            'text': '炸酱面',
            'image': 'upload/20191129/4067f19ab53a5e8388ad3459e23110f0.jpeg'
          }
        ]
      },
      rules: {
        single_select_answer: [{ required: true, message: '必填', trigger: 'change' }], //	是	string	单选题答案
        multiple_select_answer: [{ required: true, message: '必填', trigger: 'change' }], //	是	array	多选题答案
        short_answer: [{ required: true, message: '必填', trigger: 'change' }] //	是	string	简答题答案
      }
    }
  },

  computed: {
    typeToLabel() {
      const obj = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return obj[this.form.type]
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate()
    }
  }
}
</script>
<style>
</style>
